<template>
  <div>
<!--    新增-->
    <Button type="primary" icon="md-add" @click="showCreate=true,createData.state = borrower.state">新增</Button>
    <Modal v-model="showCreate" :loading="creating" title="新增记录" @on-ok="dell" >
      <Form ref="createData" :model="createData" :label-width="100">
        <span class="blo">处理信息</span>
        <br><br>
        <FormItem label="处理人员：" >
          <Input v-model="createData.processor" placeholder="请输入" style="width: 200px;"/>
        </FormItem>
        <FormItem label="处理描述：">
          <Input v-model="createData.content" type="textarea" :rows="4" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="贷款状态：">
          <Input v-model="createData.state" placeholder="请输入" style="width: 200px;" />
        </FormItem>
        <span class="blo">通知信息</span>
        <br>
        <br>
        <FormItem label="通知方式：">
          <Select v-model="createData.notificationWay" style="width:200px" @on-change="changeWay">
            <Option  v-for="item in notificationWays" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="通知内容：" prop="desc">
          <Input v-model="createData.notificationContent" type="textarea" :rows="4" placeholder="Enter something..." />
        </FormItem>
      </Form>
    </Modal>
    <br>
    <br>
<!--   详情按钮-->
    <Modal
        v-model="model1"
        title="详情">
      <Form ref="form" :model="process" label-position="top" class="ivu-mt">
        <Row type="flex" :gutter="48">
          <Col v-bind="grid2">
            <FormItem label="" prop="name"> <span class="blo">处理日期: </span>{{process.time}}
            </FormItem>
          </Col>
          <Col v-bind="grid2">
            <FormItem label="" prop="name"> <span class="blo">处理人: </span>{{process.processor}}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" :gutter="48">
          <Col span="24">
            <FormItem label="" prop="name"> <span class="blo">操作记录描述: </span><br>
              &nbsp;&nbsp;&nbsp;&nbsp;{{process.description}}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" :gutter="48">
          <Col v-bind="grid2">
            <FormItem label="" prop="name"> <span class="blo">贷款状态: </span>{{process.state}}
            </FormItem>
          </Col>
          <Col v-bind="grid2">
            <FormItem label="" prop="name"> <span class="blo">是否发送通知: </span>{{process.sendNotification}}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" :gutter="48">
          <Col v-bind="grid2">
            <FormItem label="" prop="name"> <span class="blo">通知方式: </span>{{process.notificationWay}}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" :gutter="48">
          <Col span="24">
            <FormItem label="" prop="name"> <span class="blo">通知内容: </span><br>
              &nbsp;&nbsp;&nbsp;&nbsp;{{process.notificationContent}}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
<!--    编辑-->
    <Modal
        v-model="model2"
        title="修改记录描述"
        @on-ok="ok">
      <Form ref="create" :model="process" :rules="createRules" :label-width="100">
        <span class="blo">处理信息</span>
        <br><br>
        <FormItem label="处理人员：" >
          <Input v-model="process.processor" placeholder="请输入" style="width: 200px;"/>
        </FormItem>
        <FormItem label="处理描述：">
          <Input v-model="process.description" type="textarea" :rows="4" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="贷款状态：">
          <Input v-model="process.state" style="width: 200px;" />
        </FormItem>
        <span class="blo">通知信息</span>
        <br>
        <br>
        <FormItem label="通知方式：">
          <Input v-model="process.notificationWay" placeholder="请输入" style="width: 200px;" />
        </FormItem>
        <FormItem label="通知内容：" prop="desc">
          <Input v-model="process.notificationContent" type="textarea" :rows="4" placeholder="Enter something..." />
        </FormItem>
      </Form>
    </Modal>
<!--    删除-->
    <Modal v-model="model3" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除操作</span>
      </p>
      <div style="text-align:center">
        <p>点击删除之后此条记录将会清除 请慎重操作</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
      </div>
    </Modal>

<!--    操作记录列表-->
    <Table :columns="columns12" :data="procession.data">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.processor }}</strong>
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="model1=true, process = row">详情</a>
        <Divider type="vertical" />
        <a @click="model2=true, process = row">编辑</a>
        <Divider type="vertical" />
        <a @click="model3=true,processionId = row.id">删除</a>
       </template>
    </Table>
    <br>
    <template>
      <div style="float: right">
        <Page :total="procession.total" show-sizer show-elevator
              @on-change="changePage" @on-page-size-change="changeSize"/>
      </div>
    </template>
  </div>
</template>

<script>

    import { getAllProcession, deleteProcession, addProcession } from '@/api/borrower';
    import { getBorrowerById } from '../../../api/borrower';

    export default {
        name: 'procession-list',
        data () {
            return {
                process: {},
                state: '处理中',
                processionId: null,
                notificationContent: null, // 通知内容
                model1: false,
                model2: false,
                model3: false,
                modal_loading: false,
                showCreate: false,
                creating: true,
                notificationWays: [
                    {
                        value: '短信',
                        label: '短信'
                    },
                    {
                        value: 'app',
                        label: 'app'
                    }
                ],
                columns12: [
                    {
                        title: '日期',
                        key: 'processDate'
                    },

                    {
                        title: '处理人',
                        key: 'processor'

                    },
                    {
                        title: '操作记录描述',
                        key: 'description',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        width: '95%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },
                                    domProps: {
                                        title: params.row.description
                                    },
                                    on: {
                                        click: (e) => {
                                            e.stopPropagation();
                                        }
                                    }
                                }, params.row.description)
                            ]);
                        }
                    },
                    {
                        title: '贷款状态',
                        key: 'state'

                    },
                    {
                        title: '是否通知',
                        key: 'sendNotification',
                        maxWidth: 160
                    },

                    {
                        title: '操作',
                        slot: 'action',
                        maxWidth: 200,
                        align: 'center'
                    }
                ],
                createData: {
                    state: '处理中',
                    processor: null, // 处理人
                    content: null, // 描述
                    notificationContent: null, // 通知内容
                    notificationWay: '短信'
                },
                createRules: {
                    name: [
                        // { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ]
                },
                procession: [{}],
                page: 1,
                pageSize: 10,
                borrowerId: null,
                grid2: {
                    xl: {
                        span: 12,
                        order: 1
                    },
                    lg: {
                        span: 24,
                        order: 2
                    },
                    md: {
                        span: 24,
                        order: 2
                    },
                    sm: {
                        span: 24,
                        order: 2
                    },
                    xs: {
                        span: 24,
                        order: 2
                    }
                },
                borrower: {}
            }
        },
        methods: {
            getBorrowerId () {
                this.borrowerId = this.$route.query.key;
                getBorrowerById({
                    id: this.borrowerId
                })
                    .then(res => {
                        this.borrower = res.data[0];
                    // 返回数据
                    })
                    .catch(err => {
                        console.log(err);
                    // 异常情况
                    })
            },
            changePage (currentPage) {
                this.page = currentPage;
                this.getAllProcession();
            },
            changeSize (currentSize) {
                this.pageSize = currentSize;
                this.getAllProcession();
            },
            handleOpenCreate () {
                this.updateIndex = -1;
                this.createData.desc = '';
                this.showCreate = true;
            },
            getAllProcession () {
                getAllProcession({
                    page: this.page - 1,
                    pageSize: this.pageSize,
                    borrowerId: this.borrowerId
                })
                    .then(res => {
                        this.procession = res;
                        console.log(res)
                        // 返回数据
                    })
                    .catch(err => {
                        console.log(err);
                        // 异常情况
                    })
            },
            // 修改
            ok () {
                addProcession(
                    this.process
                ).then(res => {
                    alert(res)
                    this.getAllProcession();
                }).catch(err => {
                    console.log(err);
                    this.getAllProcession();
                })
            },
            // 删除记录
            del () {
                this.modal_loading = true;
                setTimeout(() => {
                    deleteProcession({
                        id: this.processionId
                    }).then(res => {
                        this.getAllProcession();
                        this.modal_loading = false;
                        this.model3 = false;
                        this.$Message.success('删除成功');
                    }).catch(err => {
                        console.log(err);
                        this.getAllProcession();
                        this.modal_loading = false;
                        this.model3 = true;
                        this.$Message.error('删除失败');
                    })
                }, 500);
            },
            // 新增记录
            dell () {
                addProcession({
                    state: this.createData.state,
                    processor: this.createData.processor, // 处理人
                    description: this.createData.content, // 描述
                    notificationWay: this.createData.notificationWay,
                    notificationContent: this.createData.notificationContent, // 通知内容
                    borrowerId: this.borrowerId
                }).then(res => {
                    this.showCreate = false;
                    this.creating = false;
                    this.getAllProcession();
                    location.reload()
                    alert(res)
                }).catch(err => {
                    console.log(err);
                    this.creating = false;
                    this.showCreate = false;
                    this.getAllProcession();
                })
            },
            changeWay (value) {
                this.createData.notificationWay = value;
            }

        },
        created () {
            this.getBorrowerId();
            this.getAllProcession();
        }
    }
</script>

<style scoped>

.blo{
  color: black;
  font-size: 1.1em;
}

</style>
